<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>

    </h:head>
    <h:body>
        <f:view>
            <h:form>

                <h:panelGrid columns="4" width="700">
                    <h:panelGrid columns="1" style="width: 140px" >
                        <a href="#{lasTirasList.getLasTirasLink()}">
                            <img src="../resources/images/#{lasTirasList.logo}" width="160" height="120" alt="Las Tiras!!!" title="Las Tiras"></img>
                        </a>                        
                    </h:panelGrid>

                    <h:panelGrid columns="1" style="width: 150px; text-align: center">
                        <h:commandLink action="#{lasTirasList.toLasTiras()}" 
                                       immediate="true" style="color: #4075A6; font-size: 20px; text-align: center">
                            <img src="../resources/images/larDoceLarOff.png" 
                                 onmouseover="this.src='../resources/images/larDoceLarOn.png'" 
                                 onmouseout="this.src='../resources/images/larDoceLarOff.png'" 
                                 width="130"></img>
                        </h:commandLink>

                        <h:commandLink action="#{lasTirasList.toAuthors()}" 
                                       immediate="true" style="color: #4075A6; font-size: 20px; text-align: center">
                            <img src="../resources/images/autoresOff.png" 
                                 onmouseover="this.src='../resources/images/autoresOn.png'" 
                                 onmouseout="this.src='../resources/images/autoresOff.png'"
                                 width="100"></img>
                        </h:commandLink>

                        <h:commandLink action="#{lasTirasList.toContacts()}" 
                                       immediate="true" style="color: #4075A6; font-size: 20px; text-align: center">
                            <img src="../resources/images/contatoOff.png" 
                                 onmouseover="this.src='../resources/images/contatoOn.png'" 
                                 onmouseout="this.src='../resources/images/contatoOff.png'"
                                 width="100"></img>
                        </h:commandLink>                            

                    </h:panelGrid>

                    <h:panelGrid columns="1" id="panelSubscribe" style="width: 175px; text-align: center;">
                        <img src="../resources/images/recebaPorEmailOff.png" width="150"></img>
                        <h:inputText size="19"  id="subscribe" value="#{lasTirasList.email}" validatorMessage="Email inválido">
                            <f:validateRegex for="subscribe" pattern="^[_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$">

                            </f:validateRegex>
                        </h:inputText>
                        <h:panelGrid columns="1" style="text-align: center; width: 175px" >
                            <h:outputText style="color: black; text-align: center; font-size: 10px; font-family: 'arial';" value="#{lasTirasList.message}" rendered="#{lasTirasList.hasMessage()}"/>
                            <h:message for="subscribe" style="color:red; text-align: center; font-size: 10px; font-family: 'arial';"/>
                        </h:panelGrid>
                        <h:commandButton value="Cadastrar/Descadastrar" action="#{lasTirasList.saveEmail()}"/>
                        
                    </h:panelGrid>   
                   
                    <h:panelGrid columns="1" width="175" style="background-image:  url('../resources/images/backgroundLasTiras.png');">
                        <h:panelGrid columns="1" width="100">
                            <a href="https://twitter.com/lastirasbr" style="width: 100px;" class="twitter-follow-button" data-show-count="false" data-lang="pt" data-width="175px">Siga @lastirasbr</a>                    
                        </h:panelGrid>
                        <iframe 
                            src="#{lasTirasList.getFacebookSrc()}" 
                            scrolling="no" 
                            frameborder="0" 
                            class="fb_ltr" 
                            style="
                                border-width: initial; 
                                border-color: initial; 
                                overflow-x: hidden; 
                                overflow-y: hidden; 
                                width: 175px; 
                                border-width: initial; 
                                border-color: initial; 
                                height: 29px; 
                                border-top-style: none; 
                                border-right-style: none; 
                                border-bottom-style: none; 
                                border-left-style: none; 
                                border-width: initial; 
                                border-color: initial;" 
                            allowtransparency="true">
                        </iframe>
                        
                    </h:panelGrid>
                    
                     
                    

                </h:panelGrid>

            </h:form>
        </f:view>
        <hr></hr>
    </h:body>
</html>

